<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-page-header @back="goBack" content="订单详情">
      </el-page-header>
    </div>
    <el-card class="box-card">
       <el-steps :active="order.order_info.status">
         <el-step title="买家下单" :description="order.order_info.create_time"></el-step>
         <el-step title="买家付款" :description="order.order_info.pay_time"></el-step>
         <el-step title="进行中"  ></el-step>
         <el-step title="订单完成" :description="order.order_info.end_time"></el-step>
       </el-steps>
    </el-card>
    <div v-if="order" style="margin-top: 10px">
      <el-row :gutter="20">
        <el-col :span="8" :xs="24">
          <order-info  :order="order.order_info" />
        </el-col>

        <el-col :span="8" :xs="24">
          <order-user :order="order.user" />
        </el-col>

        <el-col :span="8" :xs="24">
          <order-param :order="order.order_param" :info="order.order_info"/>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <order-goods :order="order.goods" style="min-height: 160px"/>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <order-stage :order="order.stage" :info="order.order_info" style="min-height: 160px"/>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
  import OrderInfo from './components/OrderInfo'
  import OrderUser from './components/OrderUser'
  import OrderParam from './components/OrderParam'
  import OrderGoods from './components/OrderGoods'
  import OrderStage from './components/OrderStage'
  import { showOrder } from '../../api/orders'

  export default {
    name: 'orderDetail',
    components: { OrderInfo, OrderUser,OrderParam,OrderGoods,OrderStage },
    data() {
      return {
        order: {
          order_info:{},
          user:{},
          order_param:{},
          goods:[],
          stage:[],
        },
      }
    },
    created() {
      this.getOrder()
    },
    methods: {
      goBack()
      {
        this.$router.back()
      },
      getOrder() {
        const goods=[]
        let id=this.$route.query.id
        showOrder(id).then(res=>{
          goods.push(res.data.goods)
          this.order=res.data
          this.order.goods=goods
        })
      }
    }
  }
</script>
